.heart__inner {
  outline: 0;

  &:hover {
    cursor: pointer;

    .heart__icon {
      color: $lighterRed;
    }
  }

  &:active {
    .heart__icon {
      color: $lightRed;
    }
  }
}

.heart__icon {
  color: $gray;

  transition: color 0.2s ease-in-out;
}

.heart--liked {
  .heart__icon {
    color: $red;
  }

  .heart__inner {
    &:hover {
      .heart__icon {
        color: $darkRed;
      }
    }

    &:active {
      .heart__icon {
        color: $darkerRed;
      }
    }
  }
}
